<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>管理系统</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <link href="./static/bootstrap/css/bootstrap.css"
        rel="stylesheet" type="text/css"/>
  <script type="text/javascript"
          src="./static/bootstrap/js/bootstrap.js">
  </script>
  <script src="./statics/js/order-management.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      min-height: 100vh;
      font-family: Arial, sans-serif;
    }

    .sidebar {
      width: 200px;
      background-color: #2D3139;
      color: white;
      padding: 20px 0;
    }

    .logo {
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo img {
      height: 30px;
    }

    .nav-item {
      padding: 15px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #888;
      text-decoration: none;
      transition: background-color 0.3s;
      background-color: transparent;
    }

    .nav-item.active {
      background-color: #FFB800;
      color: white;
    }

    .nav-item:hover {
      background-color: #363B44;
    }

    .main-content {
      flex: 1;
      background-color: #F5F5F5;
    }

    .header {
      background-color: white;
      padding: 15px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }

    .user-menu {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .logout-icon {
      cursor: pointer;
      color: #666;
    }

    /* 订单页面样式 */
    .order-tabs {
      margin: 20px 0;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .tab-btn {
      padding: 8px 16px;
      margin-right: 10px;
      border: none;
      border-radius: 4px;
      background: #f8f9fa;
      cursor: pointer;
      transition: all 0.3s;
    }

    .tab-btn.active {
      background: #007bff;
      color: white;
    }

    .order-content {
      background: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .order-content table td {
      vertical-align: middle;
    }

    .order-content table td:nth-child(5) {
      font-weight: bold;
    }

    .btn-operate {
      padding: 5px 10px;
      margin: 0 5px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn-primary {
      background: #007bff;
      color: white;
    }

    .btn-danger {
      background: #dc3545;
      color: white;
    }

    /* 状态文本样式 */
    .text-warning {
      color: #ffc107 !important;
    }

    .text-success {
      color: #28a745 !important;
    }

    .text-danger {
      color: #dc3545 !important;
    }
  </style>
  <script>
    function setActiveNavItem(element) {
      // 移除所有导航项的 active 类
      document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
      });
      // 为被点击的导航项添加 active 类
      element.classList.add('active');
      // 更新标题
      document.querySelector('.header h1').textContent = element.querySelector('span').textContent;
      // 获取页面ID
      const pageId = element.id;
      // 加载对应的页面内容
      loadPageContent(pageId);
    }

    function loadPageContent(pageId) {
      let content = '';
      switch (pageId) {
        case 'userManagement':
          content = `

   <div class="container">
            <div class="row table-responsive">
                <table class="table table-striped table-bordered  table-condensed">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户名：</th>
                        <th>密码</th>
                        <th>手机号</th>
                        <th>用户类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${pageInfo.list}" var="user">
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td>${user.password}</td>
                            <td>${user.ipone}</td>
                            <td>${user.status}</td>
                            <td>
                                    <%--根据id删除数据--%>
                                <button onclick="deleteUserInfo(${user.id}) " type="button">删除</button>
                                    <%--在本页修改数据，--%>
                                <button onclick="updateUserInfo(${user.id}) " type="button">修改</button>

                            </td>
                        </tr>

                    </c:forEach>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4">
                            <nav aria-label="Page navigation">
                                <ul class="pagination pagination-lg">
                                    <li>
                                        <a href="/gyhQueryALLUserInfo?pageNo=${pageInfo.currPageNo-1}" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>

                                    <c:forEach var="i" begin="1" end="${pageInfo.totalPages}">
                                        <li><a href="/gyhQueryALLUserInfo?pageNo=${i}">${i}</a></li>
                                    </c:forEach>
                                    <li>
                                        <a href="/gyhQueryALLUserInfo?pageNo=${pageInfo.currPageNo+1}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            修改数据按钮
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label for="username" class="col-form-label">用户名：</label>
                                <input type="text" class="form-control" id="username">
                            </div>
                            <div class="mb-3">
                                <label for="password" class="col-form-label">密码：</label>
                                <input type="password" class="form-control" id="password">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="col-form-label">手机号：</label>
                                <input type="text" class="form-control" id="phone">
                            </div>
                            <div class="mb-3">
                                <label for="userType" class="col-form-label">用户类型：</label>
                                <select class="form-select" id="userType">
                                    <option>请选择</option>
                                    <option value="admin">管理员</option>
                                    <option value="user">普通用户</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">保存更改</button>
                        <%-- 添加按钮--%>
                        <button type="button" class="btn btn-success" >添加用户</button>

                    </div>
                </div>
            </div>
        </div>

        `;


          break;
        case 'forum':
          content = `
                        <p>这里是论坛的内容。</p>
                    `;
          break;
        case 'attractionManagement':
          content = `
                        <p>这里是景点管理的内容。</p>
                    `;
          break;
        case 'hotelManagement':
          content = `

                        <p>这里是酒店管理的内容。</p>
                    `;
          break;
        case 'ticketManagement':
          content = `

                        <p>这里是车票管理的内容。</p>
                    `;
          break;
        case 'orderManagement':
          content = `
    <div class="container" id="orderManagementContent">
        <!-- 订单标签栏 -->
        <div class="order-tabs">
            <button class="tab-btn active" data-type="all">全部订单</button>
            <button class="tab-btn" data-type="hotel">酒店订单</button>
            <button class="tab-btn" data-type="scenic">景点订单</button>
            <button class="tab-btn" data-type="ticket">车票订单</button>
        </div>

        <!-- 订单内容区域 -->
        <div class="order-content">
            <table class="table table-striped table-bordered">
                <thead>
                </thead>
                <tbody id="orderTableBody">
                </tbody>
            </table>
        </div>
    </div>`;
          // 内容加载完成后初始化订单管理
          setTimeout(() => {
            if (typeof initializeOrderManagement === 'function') {
              initializeOrderManagement();
            }
          }, 100);
          break;

        default:
          content = '<h2>欢迎来到管理系统</h2>';
      }
      document.getElementById("index-main").innerHTML = content;
      bindEvents(); // 重新绑定事件
    }
  </script>
</head>
<body>
<div class="sidebar">
  <div class="logo">
    <img src="static/img/PS2lfS0492.jpg" alt="旅游管理系统">
    <span>旅游管理</span>
  </div>

  <nav>
    <a href="/backStageManagement.jsp" id="userManagement" class="nav-item " onclick="setActiveNavItem(this)">
      <i>👥</i>
      <span>系统用户管理</span>
    </a>
    <a href="/HotelReviews" id="forum" class="nav-item" onclick="setActiveNavItem(this)">
      <i>📑</i>
      <span>论坛</span>
    </a>
    <a href="/hqfSearch?pageNo=1" id="attractionManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>🍽️</i>
      <span>景点管理</span>
    </a>
    <a href="jdshowAll" id="hotelManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>🎁</i>
      <span>酒店管理</span>
    </a>

    <a href="http://localhost:8080/view-tickets" id="ticketManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>📋</i>
      <span>车票管理</span>
    </a>
    <a href="#" id="orderManagement" class="nav-item active" onclick="setActiveNavItem(this)">
      <i>📋</i>
      <span>订单管理</span>
    </a>

  </nav>
</div>

<div class="main-content">
  <header class="header">
    <h1>系统用户管理</h1>
    <div class="user-menu">
      <span><% %></span>
      <a href="login.jsp" class="logout-icon">
        <i>⭕</i>
      </a>
    </div>
  </header>

  <main id="index-main" style="padding: 20px;">

    <div class="container" id="orderManagementContent">
      <!-- 订单标签栏 -->
      <div class="order-tabs">
        <button class="tab-btn active" data-type="all">全部订单</button>
        <button class="tab-btn" data-type="hotel">酒店订单</button>
        <button class="tab-btn" data-type="scenic">景点订单</button>
        <button class="tab-btn" data-type="ticket">车票订单</button>
      </div>

      <!-- 订单内容区域 -->
      <div class="order-content">
        <table class="table table-striped table-bordered">
          <thead>
          </thead>
          <tbody id="orderTableBody">
          </tbody>
        </table>
      </div>
    </div>

  </main>
</div>



<script type="text/javascript">


  /*点击删除按钮，根据id删除数据*/
  function deleteUserInfo(id) {
    // 确认是否删除数据

    let isDelete = confirm("是否删除数据");
    if (isDelete) {
      // 确定删除，发送ajax请求，根据id删除数据
      $.ajax({
        url: "/gyhDeleteUserInfo",
        data: {id: id},
        type: "post",
        dataType: "text",
        async: false,
        success: function (data) {
          // 删除成功，刷新页面
          location.reload();
        }
      })
    } else {
      alert("取消删除")
    }
  }


  /*点击修改按钮，在本页修改数据*/
  /* function updateUserInfo(id) {
       $(".modal").modal();

       let newUsername = $("#new-username").val();
       let newPassword = $("#new-password").val();
       let newIpone = $("#new-ipone").val();
       let newStatus = $("#new-status").val();
        let newUsername = prompt("请输入新的用户名");
        let newPassword = prompt("请输入新的密码");
        let newIpone = prompt("请输入新的手机号");
        let newStatus = prompt("请输入新的用户类型");
       if (newUsername !== null && newPassword !== null && newIpone !== null && newStatus !== null) {
           // 发送ajax请求，根据id修改数据
           $.ajax({
               url: "/gyhupdateuserinfo",
               data: {id:id,username:newUsername,password:newPassword,ipone:newIpone,status:newStatus},
               type: "post",
               dataType: "text",
               async: false,
               success: function (data) {
                   // 修改成功，刷新页面
                   location.reload();
               }
           })
       }
   }*/







  /*点击修改按钮，在本页修改数据*/
  function updateUserInfo(id) {
    // 显示模态框
    $('#myModal').modal('show');
    // 点击保存更改按钮时触发
    $('#myModal .btn-primary').off('click').on('click', function () {
      // 获取模态框中的输入值
      let newUsername = $('#username').val();
      let newPassword = $('#password').val();
      let newPhone = $('#phone').val();
      let newUserType = $('#userType').val();

      if (newUsername === '' || newPassword === '' || newPhone === '' || newUserType === '') {
        alert('请填写完整信息');
        return;
      }
      if (newPhone.length !== 11){
        alert("请输入正确的手机号格式");
        return;
      }

      /* 发送ajax请求，根据id修改数据*/
      $.ajax({
        url: "/gyhUpdateUserInfo",
        data: {
          id: id,
          username: newUsername,
          password: newPassword,
          phone: newPhone,
          userType: newUserType
        },
        type: "post",
        dataType: "text",
        async: false,
        success: function (data) {
          //判断是否保存成功
          if (data === "success") {
            alert("保存成功");
          } else {
            alert("保存失败");
          }
          // 修改成功，刷新页面
          location.reload();
        },

      });

      // 关闭模态框
      $('#myModal').modal('hide');
    });
  }

  /*点击关闭按钮时触发*/
  $('#myModal .btn-secondary').off('click').on('click', function () {
    /*关闭模态框*/
    $('#myModal').modal('hide');
  });

  function bindEvents() {
    // 绑定关闭按钮事件
    $('#myModal .btn-secondary').off('click').on('click', function () {
      $('#myModal').modal('hide');
    });
  }


  /*点击添加用户按钮，触发添加用户*/
  /*   $('#myModal .btn-success').off('click').on('click', function () {

         let newUsername = $('#username').val();
         let newPassword = $('#password').val();
         let newPhone = $('#phone').val();
         let newUserType = $('#userType').val();

         if (newUsername === '' || newPassword === '' || newPhone === '' || newUserType === '') {
             alert('请填写完整信息');
             return;
         }


         $.ajax({
             url: "/GyhMsgAddUserInfo",
             data: {
                 username: newUsername,
                 password: newPassword,
                 phone: newPhone,
                 userType: newUserType
             },
             type: "post",
             dataType: "text",
             async: false,
             success: function (data) {
                 //判断是否添加成功
                 if (data === "success") {
                     alert("添加成功");
                 } else {
                     alert("添加失败");
                 }
                 // 刷新页面
                 location.reload();
             }
         })

         // 关闭模态框
         $('#myModal').modal('hide');

     })
*/


  $(document).on('click', '#myModal .btn-success', function () {

    let newUsername = $('#username').val();
    let newPassword = $('#password').val();
    let newPhone = $('#phone').val();
    let newUserType = $('#userType').val();

    if (newUsername === '' || newPassword === '' || newPhone === '' || newUserType === '') {
      alert('请填写完整信息');
      return;
    }

    if (newPhone.length !== 11){
      alert("请输入正确的手机号格式");
      return;
    }

    $.ajax({
      url: "/GyhMsgAddUserInfo",
      data: {
        username: newUsername,
        password: newPassword,
        phone: newPhone,
        userType: newUserType
      },
      type: "post",
      dataType: "text",
      async: false,
      success: function (data) {
        if (data === "success") {
          alert("添加成功");
        } else {
          alert("添加失败,手机号重复");
        }
        location.reload();
      }
    });

    $('#myModal').modal('hide');
  });


</script>
</body>
</html>

